import React, {Component} from 'react';
import {connect} from "react-redux";
import {withRouter, Link} from "react-router-dom";
import PageContent from "../components/content";
import {Input,Icon, Table} from "antd";
// import Toolbar from "../components/template/Toolbar/index";
import moment from "moment";
import {loadVinApplications, reset} from "../pages/action/vin-action";
import '../components/table/css/table.css';

class HomeList  extends Component {
    state = {
        pagination: {
            showQuickJumper:true,
            current: 1,
            pageSize: 5
        },
        sort: {
            field: 'submittedDate',
            order: 'ascend'
        }
    };

    componentDidMount() {
        console.log(this.props)
        this.props.reset();
        this.loadVinList();
    }

    componentWillUnmount() {
        this.props.reset();
    }

    handleTableChange = (pagination, filter, sort) => {
        console.log(pagination)
        this.setState({
            pagination: pagination,
            filter: filter,
            sort: sort
        }, () => {
            this.loadVinList()
        });
    };

    loadVinList = () => {
        const {pagination} = this.state;

        this.props.loadVinApplications(pagination.current, pagination.pageSize);
    };


    render() {
        const columns = [
            {
                title: '序号',
                dataIndex: 'vinId',
                align:'center',
                render: (val, record, index) => {
                    return (index + 1) + ((this.state.pagination.current-1) * this.state.pagination.pageSize);
                }
            },
            {
                title: '申请时间',
                dataIndex: 'enterpriseName',
                render: (val, record, index) => {
                    return val;
                }
            },
            {
                title: '提交时间',
                dataIndex: 'submittedAt',
                render: (val, record, index) => {
                    return val ? moment(val).format('YYYY-MM-DD') : '-';
                }
            },
            {
                title: 'VIN申请状态',
                dataIndex: 'status',
                render: (val, record, index) => {
                    if(val === 1) {
                        return '已提交（待审批）'
                    }

                    if(val === 8) {
                        return '已审批（不通过）'
                    }

                    if(val === 9) {
                        return '已审批（通过）'
                    }
                    if(val === 10) {
                        return '已过期'
                    }
                    return '-'
                }
            },
            {
                title: 'VIN申请审核',
                render: (val, record, index) => {
                    console.log(record)
                    if(record.status === 1) {
                        return <div style={{textAlign:'center'}}><Link to={'/manage/vin/detail/' + record.vinId}>审批</Link></div>;
                    } else {
                        return <div style={{textAlign:'center'}}><Link to={'/manage/vin/view/' + record.vinId}>查看</Link></div>;
                    }
                }
            },
            {
                title: '受理通知书',
                render: (val, record, index) => {
                    return <div style={{textAlign:'center'}}><Link disabled={record.status !== 9} to={'/manage/vin/approval_instruction/' + record.vinId}>填写</Link></div>;
                }
            },
        ];

        const pager = {...this.state.pagination};
        console.log(pager)
        console.log(this.state.pagination)
        pager.total = this.props.vinApplications?this.props.vinApplications.totalRecords:0;

        return (
            <PageContent pageTitle={"VIN管理申请"}>
                {/*<Toolbar style={{textAlign: 'right', marginBottom:'20px'}}>*/}
                    {/*<span>企业名称 </span>*/}
                    {/*<Input.Search*/}
                        {/*placeholder="企业名称"*/}
                        {/*onSearch={value => console.log(value)}*/}
                        {/*style={{width:'200px'}}*/}
                        {/*enterButton={<Icon type="search" theme="outlined" />} />*/}
                {/*</Toolbar>*/}
                <Table loading={this.props.isLoading}
                       columns={columns}
                       pagination={pager}
                       dataSource={this.props.vinApplications?this.props.vinApplications.data:null}
                       rowKey={'vinId'}
                       onChange={this.handleTableChange}
                       bordered/>
            </PageContent>
        );
    }
}

const mapStateToProps = (state) => {
    console.log(state)
    return {
        isLoading: state.vinReducer.isLoading,
        vinApplications:state.vinReducer.vinApplications
    }
};

const mapDispatchToProps = (dispatch) => {
    return {
        reset: () => {
            dispatch(reset());
        },
        loadVinApplications: (page, pageSize) => {
            dispatch(loadVinApplications(page, pageSize));
        }
    }
};

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(HomeList));